<template>
	<div id="app">
		<el-row>
			<el-col :span="24">
				<el-form :model="queryWhere" :inline="true">
					<el-form-item label="权限名称:">
						<el-input v-model="queryWhere.name"></el-input>
					</el-form-item>


					<el-form-item>
						<el-button type="primary" @click="initTableData">查询</el-button>
					</el-form-item>

				</el-form>
			</el-col>


		</el-row>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>
		<el-table :data="permissionList" stripe border style="width: 100%">

			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand" label-width="200px">
						<el-form-item label="创建时间">
							<span>{{ props.row.created }}</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>


			<el-table-column prop="name" label="权限名称" width="200"></el-table-column>
			<el-table-column prop="img" label="图标" width="250"></el-table-column>
			<el-table-column prop="path" label="地址" width="250"></el-table-column>
			<el-table-column prop="level" label="级别" width="200"></el-table-column>

			<el-table-column label="操作" fixed="right" width="300">
				<template slot-scope="scope">
					<!-- 修改按钮 -->
					<el-button type="primary" icon="el-icon-edit" size="small" @click="editDialog(scope)">修改图标
					</el-button>
					<!-- 删除按钮 -->
					<el-button type="danger" icon="el-icon-delete" size="small"
						@click="delDialog(scope.row.permission_id)">删除
					</el-button>


				</template>

			</el-table-column>

		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>

		<!-- 修改图标 弹出框  -->
		<el-dialog title="提示" :visible.sync="dialogVisible" width="1024">


			<el-form :model="permissionInfo" :inline="true" label-width="100px">

				<el-form-item label="图标:">

					<el-select v-model="permissionInfo.img" placeholder="请选择" size="small">
						<el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updatepermission">确 定</el-button>
			</div>

		</el-dialog>










	</div>


</template>

<script>
	export default {
		name: 'permission',
		created: function() {
			this.access_token = window.sessionStorage.getItem("token");
		},
		mounted: function() {
			this.initTableData();
		},

		methods: {
			updatepermission: function() {
				console.log("掉用了 updatepermission方法")
				let _this = this;
				console.log("传递给后端的数据为!!!!!!:", this.permissionInfo)
				let url = "/api/mall/PermissionServlet.do?method=updatePermissionById&access_token=" + this
					.access_token;
				this.$http.get(url, {
					params: this.permissionInfo
				}).
				then(function(response) {
					console.log("服务端返回的结果为:", response, response.data.code);
					console.log(response.data.code)
					if (response.data.code == 0) {
						console.log(response.data.code)
						//更新数据的时候 属性菜单栏也要更新下
						//触发已经绑定的全局事件
						console.log('window.sessionStorage.getItem role_id', window.sessionStorage.getItem(
							'role_id'))
						console.log('_this.$emit', _this.$emit)
						//this.$bus.$emit
						_this.$bus.$emit('refreshMenu', window.sessionStorage.getItem('role_id'));

						//关闭Dialog
						_this.dialogVisible = false;
						//重新刷新表格数据
						_this.initTableData();

						//把修改后的数据更新到表格中
						for (let attr in _this.permissionInfo) {
							_this.currentEditpermissionInfo[attr] = _this.permissionInfo[attr]
						}

						_this.$notify({
							title: '提示',
							message: "更新图标信息成功",
							duration: 2000
						});
					} else {
						_this.$notify({
							title: '提示',
							message: response.data.msg,
							duration: 2000
						});
					}
				}).
				catch(function(error) {
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			//修改图标
			editDialog: function(scope) { //点击修改按钮调用的函数

				//发生请求修改图标信息
				this.currentEditpermissionInfo = scope.row;
				//把当前修改的书刊赋给currentEditpermissionInfo,
				//目的是在修改成功时，把permissionInfo中的数据替换
				this.dialogVisible = true; //显示弹出框

				for (let attr in this.permissionInfo) {
					this.permissionInfo[attr] = scope.row[attr]
				}


			},
			//删除权限 真的删除
			delDialog: async function(permission_id) {
				//弹框询问是否删除
				const confirmResult = await this.$confirm('是否删除该角色', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(function(error) {
					console.log(error);
				})

				if (confirmResult != 'confirm') {
					return this.$message.info('已取消删除')
				}

				//发生请求删除用户信息
				let _this = this;
				console.log("!!!!!!!!!!!!!!!!!!");
				let url = "/api/mall/PermissionServlet.do?method=deletePermissionById&access_token=" + this
					.access_token;

				await this.$http.get(url, {
					params: {
						permissionId: permission_id
					}
				}).then(function(response) {
					console.log("address服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.$message({
							message: response.data.msg,
							type: 'success'
						});
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
				this.initTableData(); //重新查数据库。
				//更新数据的时候 属性菜单栏也要更新下
				//触发已经绑定的全局事件
				this.$bus.$emit('refreshMenu', window.sessionStorage.getItem('role_id'));

			},
			initTableData: function() {
				let _this = this;
				let url = "/api/mall/PermissionServlet.do?method=query&access_token=" + this.access_token;

				this.$http.get(url, {
					params: _this.queryWhere
				}).then(function(response) {
					console.log(" initTableData  服务端返回的数据为:", response); //esponse.data.data is undefined
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;
						_this.pageInfo.pageSize = response.data.data.pageSize;
						_this.permissionList = response.data.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},

			handleSizeChange: function(pageSize) {
				//alert("修改了每页显示的记录数",val);
				//console.log("修改了每页显示的记录数",val)
				this.queryWhere.pageSize = pageSize;
				this.initTableData(); //重新查数据库。。
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			}
		},
		data: function() {
			return {
				dialogVisible: false, //修改显示框
				access_token: "",
				permissionList: [],
				currentEditpermissionInfo: {}, //用于存储管理员点击修改时的图标信息
				permissionInfo: {
					permission_id: "",
					parent_id: "",
					name: "",
					img: "",
					path: "",
					level: "",
					status: "",
					created: ""
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
				queryWhere: {
					name: "",
					currentPage: 1,
					pageSize:5
				},
				options: [{
						value: "el-icon-s-custom",
						label: "el-icon-s-custom"
					},
					{
						value: "el-icon-view",
						label: "el-icon-view"
					},
					{
						value: "el-icon-edit",
						label: "el-icon-edit"
					},
					{
						value: "el-icon-mobile",
						label: "el-icon-mobile"
					},
				],
				value: ""

			}
		}
	}
</script>
